<template>
    <div class="personality">
      <div v-if="orderList==0" style="text-align: center;font-size: 0.5rem;color: white;padding-top: .6rem">暂无订单</div>
        <div class="main" v-if="orderList!=0">
            <div class="personStyle" >订单编号 <span>{{orderInfo.orderNum}}</span></div>
            <div class="personStyle">付款金额 <span>￥{{orderInfo.orderPrice}}</span></div>
            <div class="personStyle" >付款状态<span><span>{{orderInfo.payStatus==0?'未付款':orderInfo.payStatus==1?'已付定金':orderInfo.payStatus==2?'支付完成':''}}</span></span></div>
            <div class="personStyle" >购买时长<span v-if="orderInfo.buyDuration=3">试用3个月</span>
                                           <span v-else>{{orderInfo.buyDuration/12}}年</span></div>
            <div class="personStyle" >有效期<span>2019-12-10</span></div>
                           
            <div class="personStyle" >版本配置<span>{{orderInfo.packageId==1?'入门版(16个)':orderInfo.packageId==2?'基础版(100个)':orderInfo.packageId==3?'标准版(300个)':orderInfo.packageId==3?'高级版(800个)':''}}</span></div>
            <div class="personStyle" style="line-height: inherit;padding: 0.4rem 0" >
              <div class="weui_cell">
                <div class="text1 weui_cell_primary">增加采集点</div>
                <div class="text2">{{orderInfo.patchTotal}}个采集点</div>
              </div>
              <div class="text3">(数字量输出：{{orderInfo.patchAiIn}}个，模拟量输入：{{orderInfo.patchAiIn}}个，互感开关输出：{{orderInfo.patchSwitchOut}}个)</div>
              <!--增加采集点 <span>{{orderInfo.patchTotal}}个采集点</span><br>-->
              <!--<span>(数字量输出：{{orderInfo.patchAiIn}}个，模拟量输入：{{orderInfo.patchAiIn}}个， 互感开关输出：{{orderInfo.patchSwitchOut}}个)</span>-->
            </div>
            <div class="personStyle weui_cell" style="line-height: inherit;padding: 0.4rem 0">
              <div class="weui_cell_primary text1">组网方式</div>
              <div class="" style="text-align: right">
                <div class="text2" v-show="orderInfo.connectionWifi==1">WiFi直连</div>
                <div class="text2" v-show="orderInfo.connectionWifiFourG==1">WiFi+4G直连<br></div>
                <div class="text3" v-show="orderInfo.connectionWifiFourG!=''" style="margin-top: 0">(网卡运营商：{{connectionWifiFourG | workTypes}})<br></div>
                <div class="text2" v-show="orderInfo.connectionCable==1" >网线直连<br></div>
                <div class="text2" v-show="orderInfo.connectionFourG!=''" >4G直连<br></div>
                <div class="text3" v-show="orderInfo.connectionFourG!=''" style="margin-top: 0">(网卡运营商：{{connectionFourG | workTypes}})</div>
                <!--<span v-if="orderInfo.connectionFourG">{{orderInfo.connectionFourG.includes(1)?'4g直连-中国移动,':''}}</span>-->
                <!--<span  v-if="orderInfo.connectionFourG">{{orderInfo.connectionFourG.includes(2)?'4g直连-中国联通,':''}}</span>-->
                <!--<span  v-if="orderInfo.connectionFourG">{{orderInfo.connectionFourG.includes(3)?'4g直连-中国电信,':''}}</span>-->
              </div>
            </div>

        </div>
    </div>
</template>

<script>

    export default {
        name: "personalityInformation",
        data() {
            return {
                //顶部文本信息
                topInformation: '个人信息',
                //用户信息
                userInfo: '',
                orderList:'',
                orderInfo:{
                    orderNum:'D123123',
                    payStatus:0,
                    buyDuration:3,
                    connectionCable: 1,
                    connectionFourG: '1,2,3',
                    connectionWifi: 1,
                    connectionWifiFourG: 1,
                    opportunityId: 69,
                    packageId: 1,
                    patchAiIn: 77,
                    patchDiOut: 66,
                    patchExtra: 207,
                    patchSwitchOut: 80,
                    patchTotal: 223,
                },
                connectionFourG:[],
                connectionWifiFourG:[]
            }
        },
        filters:{
          workTypes(val){
            let all =[]
            val.forEach(item=>{
              if(item == 1){
                all.push('中国移动')
              }
              if(item == 3){
                all.push('中国电信')
              }
              if(item == 2){
                all.push('中国联通')
              }
            })
            let a = all.join(",")
            return a
          },
        },
        methods: {
            //判断登录状态
            loginStatus(){
                let user = localStorage.getItem("userInfo");
                if(!user){
                    this.$router.push("/login");
                }
            },
            getOrderInfo(){
              this.$http(this.$API.getOrderInfo,'', true).then((res) => {
                if (res) {
                  this.orderList = res.data.length
                  this.orderInfo = res.data[0]
                  this.connectionFourG = this.orderInfo.connectionFourG.split(",")
                  this.connectionWifiFourG= this.orderInfo.connectionWifiFourG.split(",")
                }
              });
            }
        },
        created() {
            this.loginStatus();
            //接受参数关键代码
            this.userInfo = this.$route.query.userInfo;
        },
        mounted(){
          this.getOrderInfo()
        }
    }
</script>

<style lang="less" scoped>
  .personality {
    background: #22233f;
    height: 100vh;
    overflow-y: auto;
    .personalityText{
      color: #000;
    }
    .weui_cell_primary {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
    }

    .weui_cell {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .main {
      // background: rgba(0,0,0,0.3);
      .personStyle{
        line-height: 60px;
        width: 90%;
        margin: 0 5%;
        font-size: 18px;
        text-align: left;
        color: #ffffff;
        border-bottom: rgba(255,255,255,0.2) 1px solid;
        span{
          float: right;
          /*margin-right: 18px;*/
          color: rgba(255,255,255,0.5);
        }
        img{
          width: 10px;
          height: 20px;
          float: right;
          margin: 20px 0;
        }
        .text1{
          font-size: 0.48rem;
          text-align: left;
          color: #ffffff;
        }
        .text2{
          color: rgba(255, 255, 255, 0.5);
        }
        .text3{
          font-size: 0.3rem;
          color: rgba(255, 255, 255, 0.5);
          margin-top: 10px;
        }
      }
      .userEdit{
        line-height: 40px;
        font-size: 18px;
        width: 90%;
        text-align: left;
        margin: 0px 5%;
        color: #ffffff;
        border-bottom: rgba(255,255,255,0.5) 1px solid;
      }
      .userEdit::placeholder{
        color: rgba(255,255,255,0.5);
      }
    }
  }
</style>
